<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- 忽略数字自动识别为电话号码 ,忽略识别邮箱 -->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!-- 启用360浏览器的极速模式(webkit) -->
		<meta name="renderer" content="webkit">
		<!-- 避免IE使用兼容模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait" />
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="true" />
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true" />
		<!-- 360强制全屏 -->
		<meta name="360-fullscreen" content="true" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>我的账号</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<!-- <link rel="shortcut icon" href="/favicon.ico"> -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
		<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			.clerarfix:after {
				display: table;
				content: "";
				clear: both;
			}
			
			.fl {
				float: left;
			}
			
			.fr {
				float: right;
			}
			
			.headbox {
				height: 5rem;
				width: 100%;
				background: white;
				margin-top: 1rem;
			}
			
			.headbox1 {
				margin-left: 0.6rem;
				font-weight: 510;
			}
			
			.to {
				margin-right: 0.8rem;
			}
			
			.headbox2 {
				display: inline-block;
				margin-top: 0.75rem;
				margin-right: 1rem;
				width: 3.5rem;
				height: 3.5rem;
				background: url(imges/touxiang.png)no-repeat center center;
				background-size: cover;
				border-radius: 50%;
			}
			
			.contentbox {
				background: white;
				width: 100%;
				height: 3rem;
				margin-top: 0.4rem;
			}
			
			.content1 {
				margin-left: 0.6rem;
				font-weight: 510;
			}
			
			.iconto {
				margin-right: 0.8rem;
			}
			
			.content2 {
				color: #9d9d9d;
				margin-right: 1rem;
			}
		</style>
	</head>

	<body>
		<div class="page-group">
			<div class="page page-current">
				<!-- 你的html代码 -->
				<header class="bar bar-nav" style="background:#009eff">
					<a class="button button-link button-nav pull-left back" style="color:white" href="我的.html">
						<span class="icon icon-left"></span> 返回
					</a>
					<h1 class="title" style="color:white">我的账号</h1>
				</header>
				<div class="content">
					<div class="headbox clearfix">
						<div class="headbox1 fl">头像</div>
						<span class="icon icon-right fr to"></span>
						<div class="headbox2 fr"></div>
					</div>
					<div class="contentbox clearfix">
						<div class="content1 fl">昵称</div>
						<span class="icon icon-right fr iconto"></span>
						<div class="content2 fr">小 Kiss</div>
					</div>
					<div class="contentbox clearfix">
						<div class="content1 fl">年纪</div>
						<span class="icon icon-right fr iconto"></span>
						<div class="content2 fr">高二</div>
					</div>
					<div class="contentbox clearfix">
						<div class="content1 fl">学校</div>
						<span class="icon icon-right fr iconto"></span>
						<div class="content2 fr">合肥一中</div>
					</div>
					<div class="contentbox clearfix">
						<div class="content1 fl">账号</div>
						<span class="icon icon-right fr iconto"></span>
						<div class="content2 fr">18758569495</div>
					</div>
					<div class="contentbox clearfix">
						<div class="content1 fl">密码</div>
						<span class="icon icon-right fr iconto"></span>
					</div>
					<div class="contentbox">
						<div class="tui">退出登录</div>
					</div>
				</div>
			</div>
		</div>

		<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
		<script src="js/jquery-3.2.1.js"></script>
		<script>
			$(start);

			function start() {
				var $headbox1 = ($(".headbox").height() / 2) - ($(".headbox1").height() / 2);
				$(".headbox1").css({
					"margin-top": $headbox1
				});
				var $to = ($(".headbox").height() / 2) - ($(".to").height() / 2);
				$(".to").css({
					"margin-top": $to
				});
				var $content = ($(".contentbox").height() / 2) - ($(".content1").height() / 2);
				$(".content1").css({
					"margin-top": $content
				});
				var $content2 = ($(".contentbox").height() / 2) - ($(".content2").height() / 2);
				$(".content2").css({
					"margin-top": $content2
				});
				var $icon = ($(".contentbox").height() / 2) - ($(".iconto").height() / 2);
				$(".iconto").css({
					"margin-top": $icon
				});
				$(".contentbox:last").css({
					"margin-top": "2rem",
					"text-align": "center",
					"display": "inline-block"
				});
				var $tui = ($(".contentbox").height() / 2) - ($(".tui").height() / 2);
				$(".tui").css({
					"margin-top": $tui
				});
				$(".contentbox .tui").click(
					function(){
						location.href="登录页.html";
					}
				)
			}
		</script>
	</body>

</html>